<%@ page contentType="text/html" pageEncoding="UTF-8" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<c:set var="contextPath"
	value="${pageContext.servletContext.contextPath}" />
<!doctype html>
<html lang="en">
<head>
<title>Create booking</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="${contextPath}/styles/default.css" />
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>
	<header>
		<c:import url="/WEB-INF/JSP/menu.jsp" />
		<h1>Create booking</h1>
	</header>
	<h2>Trip</h2>
	<dl>
		<dt>Destination</dt>
		<dd>${booking.trip.destination.name}</dd>
		<dt>Departure location</dt>
		<dd>${booking.trip.departureLocation.name}</dd>
		<dt>Departure date</dt>
		<dd>
			<spring:eval expression="booking.trip.period.departureDate" />
		</dd>
		<dt>Arrvial date</dt>
		<dd>
			<spring:eval expression="booking.trip.period.returnDate" />
		</dd>
		<dt>Number of days</dt>
		<dd>${booking.trip.period.numberOfDays}</dd>
		<dt>Gross price per person</dt>
		<dd>
			<spring:eval expression="booking.grossPricePerPerson" />
		</dd>
	</dl>
	<c:url value="/bookings" var="bookingsURL" />
	<h2>Customer</h2>
	<dl>
		<dt>Username</dt>
		<dd>${booking.customer.username}
	</dl>
	<h2>Price</h2>
	<dl>
		<dt>Gross price</dt>
		<dd id="grossPrice">
			${booking.seats} seat(s) x
			<spring:eval expression="booking.grossPricePerPerson" />
			=
			<spring:eval expression="booking.grossPrice" />
		</dd>
		<dt>Net price</dt>
		<dd id="netPrice">
			${booking.seats} seat(s) x
			<spring:eval expression="booking.netPricePerPerson" />
			=
			<spring:eval expression="booking.netPrice" />
		</dd>
	</dl>
	<h2>Booking</h2>
	<form:form action="${bookingsURL}" method="post" commandName="booking">
		<form:label path="seats">Number of persons (${booking.trip.availableSeats} seats available)
		<form:errors path="seats" cssClass="error" />
		</form:label>
		<div>
			<form:input path="seats" size="3" cssClass="inline" />
			<img src="${contextPath}/images/plus.png" alt="more seats"
				title="more seats" id="moreSeats" /> <img
				src="${contextPath}/images/min.png" alt="less seats"
				title="less seats" id="lessSeats" />
		</div>
		<div>
			Payment
			<form:errors path="wayOfPayment" cssClass="error" />
		</div>
		<div>
			<form:radiobutton path="wayOfPayment"
				label="Credit card (${booking.creditcardDiscountPercentage} % discount)"
				value="CREDITCARD" id="creditcard" />
		</div>
		<div>
			<form:radiobutton path="wayOfPayment" label="Endorsement"
				value="ENDORSEMENT" id="endorsement" />
		</div>
		<div id="creditcardinfo">
			<h2>Credit card info</h2>
			<form:label path="creditCard.id">Credit card id (type only the digits)<form:errors
					path="creditCard.id" class="error" />
				<form:input path="creditCard.id" />
			</form:label>
			<div class="rij">
				<form:label path="creditCard.expirationMonth">Expiration<form:errors
						path="creditCard.expirationMonth" cssClass="error" />
					<form:errors path="creditCard.expirationYear" cssClass="error" />
					<form:errors path="creditCard.expired" cssClass="error" />
					<div>
						<form:select path="creditCard.expirationMonth"
							items="${expirationMonthNumbers}" cssClass="inline"
							id="expirationMonth" />
						/
						<form:select path="creditCard.expirationYear"
							items="${expirationYearNumbers}" cssClass="inline"
							id="expirationYear" />
					</div>
				</form:label>
			</div>
		</div>
		<div>
			<form:errors />
			<input type="submit" value="Book" />
		</div>
		<form:hidden path="trip" />
	</form:form>
	<c:url var="bookingPriceURL" value="/bookings/price" />
	<script>
		function recalculatePrices() {
			var creditcard = $("#creditcard").is(':checked');
			var seats = $("#seats").val();
			var trip = $("#trip").val();
			if (isFinite(seats)) {
				$.ajax({
					url : "${bookingPriceURL}?trip=" + trip + "&seats=" + seats
							+ "&creditcard=" + creditcard,
					dataType : "json",
					success : function(data) {
						$("#grossPrice,#netPrice").fadeTo('slow', 0,
								function() {
									$("#grossPrice").html(data[0]);
									$("#netPrice").html(data[1]);
									$(this).fadeTo('slow', 1);
								});
					}
				});
			}
		}

		$(function() {
			if (!$("#creditcard").is(':checked')) {
				$('#creditcardinfo').hide();
			}
			$("#creditcard,#endorsement").change(function() {
				if ($("#creditcard").is(':checked')) {
					$('#creditcardinfo').show();
				} else {
					$('#creditcardinfo').hide();
				}
			});
			$("#creditcard,#endorsement,#seats").change(recalculatePrices);
			$("#moreSeats").click(function() {
				var seats = $("#seats").val();
				if (isFinite(seats)) {
					$("#seats").val(++seats);
					recalculatePrices();
				}
			});
			$("#lessSeats").click(function() {
				var seats = $("#seats").val();
				if (isFinite(seats) && seats > 1) {
					$("#seats").val(--seats);
					recalculatePrices();
				}
			});
		});
	</script>
</body>
</html>
